<template>
  <div class="splitter">
    <div id="footer-target">
      <div class="tip">footer被挂载到这里了</div>
    </div>
    <div class="table-container">
      <el-table-wrapper
        url="/mock/data.json"
        type="s"
        :ajax="ajax"
        ref="table"
        pager-position="both"
        footer-target="#footer-target"
      >
        <el-table-column type="selection" prop="checked"></el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="Name" prop="name"></el-table-column>
        <el-table-column label="Dept." prop="dept"></el-table-column>
        <el-table-column label="Remark" prop="remark"></el-table-column>
      </el-table-wrapper>
    </div>
  </div>
</template>

<script>
import tableMixin from './table.mixin'
import axios from 'axios'

export default {
  mixins: [tableMixin],
  methods: {
    ajax(e) {
      return new Promise((resolve, reject) => {
        axios.request(e).then(response => {
          const {pageSize, pageIndex} = e.params
          setTimeout(() => {
            resolve({
              list: response.data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize),
              total: response.data.length
            })
          }, 3000)
        }).catch(response => {
          reject(response.data)
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.splitter {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#footer-target {
  height: 60px;
  flex: 0 0 auto;;
}

.table-container {
  flex: 1 1 auto;
  overflow: auto;
}

#footer-target {
  background-color: #c4e8ff;
  position: relative;

  .tip {
    position: absolute;
    left: 400px;
    top: 15px;
    color: #000000;
  }

  &:hover {
    background-color: #64bbf3;
  }
}
</style>
